<template>
  <!-- 开屏广告 -->
  <view class="content">
    <swiper
      class="swiper"
      :class="advData.adList.length == 1 ? 'on' : ''"
      :autoplay="autoplay"
      :duration="duration"
      @change="stopChange"
      v-if="advData.adList.length"
      :indicator-dots="advData.adList.length > 1 ? true : false"
      indicator-active-color="#e93323"
      circular="true"
      :interval="3000"
    >
      <swiper-item
        v-for="(item, index) in advData.adList"
        :key="index"
        @click="jump(item.linkUrl)"
      >
        <view class="swiper-item">
          <view class="swiper-item-img">
            <image :src="item.imageUrl" mode="aspectFill"></image>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="jump-over" :style="{ top: navH + 'rpx' }" @tap="launchFlag()"
      >跳过<text v-if="closeType == 1">{{ time }}</text>
      <slot name="bottom"></slot>
    </view>
  </view>
</template>

<script>
let app = getApp();
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
//let menuHeight = uni.getMenuButtonBoundingClientRect().height; // 获取胶囊高度并设置标题高度
export default {
  data() {
    return {
      //iSindicator: false,
      autoplay: true,
      duration: 300,
      jumpover: "跳过",
      experience: "立即体验",
      time: this.advData.splashAdShowTime,
      timecount: undefined,
      // #ifndef H5
      navH: 20 + sysHeight * 2,
      // #endif
      // #ifdef H5
      navH: 60 + sysHeight * 2,
      // #endif
    };
  },
  props: {
    advData: {
      type: Object,
      default: () => {},
    },
    // 1 倒计时 2 手动关闭(预留)
    closeType: {
      type: Number,
      default: 1,
    },
  },
  mounted() {
    this.timer();
  },
  beforeDestroy() {
    clearInterval(this.timecount);
  },
  methods: {
    stopChange() {
      if (this.advData.adList.length == 1) {
        return false;
      }
    },
    timer() {
      var t = this.advData.splashAdShowTime || 5;
      this.timecount = setInterval(() => {
        t--;
        this.time = t;
        if (t <= 0) {
          clearInterval(this.timecount);
          this.launchFlag();
        }
      }, 1000);
    },
    launchFlag() {
      clearInterval(this.timecount);
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
    jump(url) {
      if (url) {
        clearInterval(this.timecount);
        uni.redirectTo({
          url: url,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
page,
.content {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100vh;
  background: #ffffff;
}

.swiper-item {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: flex-end;
  flex-direction: column-reverse;
}

.swiper-item-img {
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
}

.swiper-item-img image {
  width: 100%;
  height: 100%;
}

.jump-over {
  position: absolute;
  height: 45rpx;
  line-height: 40rpx;
  padding: 0 15rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #b09e9a;
  border: 1px solid #b09e9a;
  z-index: 999;
  left: 30rpx;
}
</style>
